<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>常用购票人管理</title>
        <jsp:include page="top-link.jsp"></jsp:include>
        <link rel="shortcut icon" href="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/favicon.ico" type="image/x-icon">
        <style type="text/css">
            .star_color {
                color: red;
            }
        </style>
    </head>
    <body>
        <%@include file="top-nav.jsp" %>
        <!--个人中心begin-->
        <div class="layui-container" style="margin-top: 40px">
            <div class="layui-row">
                <!--        侧边栏begin-->
                <div class="layui-col-md3">
                    <ul class="layui-nav layui-nav-tree ">
                        <li class="layui-nav-item"><span style="font-size: 22px;padding: 10px">我的票虫</span></li>
                        <li class="layui-nav-item">
                            <span style="font-size: 18px;padding: 15px">交易中心</span>
                            <dl>
                                <dd><a href="${pageContext.request.contextPath}/api/v1/pri/user/order">&gt; 订单管理</a>
                                </dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <span style="font-size: 18px;padding: 15px">账户中心</span>
                            <dl>
                                <dd><a href="${pageContext.request.contextPath}/api/v1/pri/user/do/reset-pwd">&gt;
                                    修改密码</a>
                                </dd>
                                <dd>
                                    <a href="${pageContext.request.contextPath}/api/v1/pri/user/do/personal">&gt;
                                        个人信息</a>
                                </dd>
                                <dd class="layui-this"><a href="">&gt; 常用购票人</a></dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <!--        侧边栏end-->

                <!--        常用购票人管理begin-->
                <div class="layui-col-md9" style="float: right;">
                    <div class="layui-card">
                        <div class="layui-card-header layui-bg-cyan">常用购票人管理</div>
                        <botton class="layui-btn" onclick="openModak()"
                                style="float: right;margin-top: 5px;margin-right:20px">添加常用购票人
                        </botton>
                        <div style="padding: 20px; background-color: #F2F2F2;">
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <table class="layui-table">
                                            <colgroup>
                                                <col width="150">
                                                <col width="200">
                                                <col>
                                            </colgroup>
                                            <thead>
                                                <tr>
                                                    <th>序号</th>
                                                    <th>姓名</th>
                                                    <th>证件类型</th>
                                                    <th>证件号</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <c:forEach items="${jsonData.data.list}" var="u" varStatus="status">
                                                <tbody>
                                                    <tr>
                                                        <td>${status.index+1}</td>
                                                        <td>${u.buyerTicketUsername}</td>
                                                        <td>
                                                            <c:if test="${u.buyerTicketDocumentType==1}">
                                                                身份证
                                                            </c:if>
                                                            <c:if test="${u.buyerTicketDocumentType==2}">
                                                                护照
                                                            </c:if>
                                                        </td>
                                                        <td>${u.buyerTicketIdCardNumber}</td>
                                                        <td>
                                                            <a href="${pageContext.request.contextPath}/api/v1/pri/user/delete?buyTicketId=${u.buyerTicketId}&pageNum=${jsonData.data.pageNum}&pageSize=${jsonData.data.pageSize}">
                                                                <button type="button"
                                                                        class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal">
                                                                    删除
                                                                </button>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </c:forEach>
                                        </table>


                                        <div id="test1" style="margin-top: 30px;text-align: center">

                                            <div class="layui-laypage">

                                                <a href="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list?pageNum=${jsonData.data.prePage}&pageSize=${jsonData.data.pageSize}"
                                                   class="layui-laypage-prev">
                                                    上一页
                                                </a>
                                                <%--                                                分页--%>

                                                <c:choose>
                                                    <c:when test="${jsonData.data.pages <= 3}">
                                                        <c:set var="begin" value="1"/>
                                                        <c:set var="end" value="${jsonData.data.pages}"/>
                                                    </c:when>
                                                    <%--页数超过了4页--%>
                                                    <c:otherwise>
                                                        <c:set var="begin" value="${jsonData.data.pageNum}"/>
                                                        <c:set var="end" value="${jsonData.data.pageNum + 3}"/>

                                                        <%--如果end超过最大页,设置起始页=最大页-3--%>
                                                        <c:if test="${end > jsonData.data.pages}">
                                                            <c:set var="begin" value="${jsonData.data.pages - 3}"/>
                                                            <c:set var="end" value="${jsonData.data.pages}"/>
                                                        </c:if>
                                                    </c:otherwise>
                                                </c:choose>

                                                <%--遍历--%>

                                                <c:forEach begin="${begin}" end="${end}" varStatus="status">
                                                    <a style="padding: 0px"
                                                       href="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list?pageNum=${status.index}&pageSize=${jsonData.data.pageSize}"
                                                       data-page="${status.index}">
                                                        <c:if test="${status.index == jsonData.data.pageNum}">
                                                                <span class="layui-laypage-curr" style="width: 4px"><em
                                                                        class="layui-laypage-em"></em><em>${status.index}</em></span>
                                                        </c:if>

                                                        <c:if test="${status.index != jsonData.data.pageNum}">
                                                            <span>${status.index}</span>
                                                        </c:if>
                                                    </a>
                                                </c:forEach>

                                                <%--                                                分页--%>

                                                <c:if test="${jsonData.data.nextPage == 0}">
                                                    <a href="#">下一页</a>
                                                </c:if>
                                                <c:if test="${jsonData.data.nextPage != 0}">
                                                    <a class="layui-laypage-next"
                                                       href="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list?pageNum=${jsonData.data.nextPage}&pageSize=${jsonData.data.pageSize}">
                                                        下一页
                                                    </a>
                                                </c:if>
                                            </div>
                                            <br>
                                            <p> 总共 ${jsonData.data.pages} 页，共 ${jsonData.data.total}
                                                条数据。当前在第 ${jsonData.data.pageNum} 页


                                                <select class="form-control" onchange="window.location=this.value;">
                                                    <c:if test="${jsonData.data.pageSize == 2}">
                                                        <option selected>
                                                            2
                                                        </option>
                                                        <option value="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list?pageNum=1&pageSize=4">
                                                            4
                                                        </option>
                                                        <option value="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list?pageNum=1&pageSize=6">
                                                            6
                                                        </option>
                                                        <option value="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list?pageNum=1&pageSize=8">
                                                            8
                                                        </option>
                                                    </c:if>
                                                    <c:if test="${jsonData.data.pageSize == 4}">
                                                        <option value="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list?pageNum=1&pageSize=2">
                                                            2
                                                        </option>
                                                        <option selected>
                                                            4
                                                        </option>
                                                        <option value="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list?pageNum=1&pageSize=6">
                                                            6
                                                        </option>
                                                        <option value="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list?pageNum=1&pageSize=8">
                                                            8
                                                        </option>
                                                    </c:if>
                                                    <c:if test="${jsonData.data.pageSize == 6}">
                                                        <option value="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list?pageNum=1&pageSize=2">
                                                            2
                                                        </option>
                                                        <option value="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list?pageNum=1&pageSize=4">
                                                            4
                                                        </option>
                                                        <option selected>
                                                            6
                                                        </option>
                                                        <option value="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list?pageNum=1&pageSize=8">
                                                            8
                                                        </option>
                                                    </c:if>
                                                    <c:if test="${jsonData.data.pageSize == 8}">
                                                        <option value="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list?pageNum=1&pageSize=2">
                                                            2
                                                        </option>
                                                        <option value="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list?pageNum=1&pageSize=4">
                                                            4
                                                        </option>
                                                        <option value="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list?pageNum=1&pageSize=6">
                                                            6
                                                        </option>
                                                        <option selected>
                                                            8
                                                        </option>
                                                    </c:if>
                                                </select>
                                            </p>
                                            <br>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--常用购票人end-->
                    </div>
                </div>
            </div>
            <!--个人中心end-->
            <!-- 尾部导航 -->
            <%@include file="foot-nav.jsp" %>

            <script src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/layui/layui.js"></script>
            <script src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/layui/lay/modules/jquery.js"></script>
            <script>
                layui.use(['element'], function () {
                })
                layui.use('form', function () {
                    var form = layui.form;
                    form.render();
                    //监听提交
                    // form.on('submit(verify)', function (data) {
                    //     layer.msg(JSON.stringify(data.field));
                    //     return false;
                    // });
                });

                function openModak() {
                    layui.use(['layer', 'jquery'], function () {
                        var layer = layui.layer,
                            $ = layui.jquery;
                        layer.open({
                            type: 1, //类型
                            area: ['600px', '400px'], //定义宽和高
                            title: '添加常用购票人', //题目
                            shadeClose: false, //点击遮罩层关闭
                            content: $('#motaikunag') //打开的内容
                        });
                    })
                }

            </script>
    </body>
    <!--模仿bootstrap的模态框-->
    <div id="motaikunag" style="display: none;">
        <form class="layui-form" method="post"
              action="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-add" style="margin-top: 70px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <input type="hidden" name="userInfoId" value="${user_id}">
                    <label class="layui-form-label"><span class="star_color">*</span> 姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="buyerTicketUsername" name="buyerTicketUsername" lay-verify="required"
                               autocomplete="off" placeholder="真实姓名"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="star_color">*</span> 证件类型</label>
                <div class="layui-input-inline">
                    <select id=buyerTicketDocumentType" name="buyerTicketDocumentType" lay-verify="required">
                        <option value="">证件类型</option>
                        <option value="1">居民身份证</option>
                        <option value="2">护照</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="star_color">*</span>身份证</label>
                <div class="layui-input-block">
                    <input type="text" id="buyerTicketIdCardNumber" name="buyerTicketIdCardNumber"
                           lay-verify="required|identity" placeholder="请输入身份证"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <input type="hidden" name="add-ticket-people" value="add-ticket-people">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" style="background-color: #1e9fff;" lay-submit=""
                            lay-filter="verify" id="add_btn">保存
                    </button>
                    <button type="reset" id="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

</html>
